
/* 
 * umbrUI checkboxes by @simurai
 * Usage: <input type="checkbox" data-icon1="P" data-icon2="v" /> 	
 */


/* ----------- Checkbox */


input[type="checkbox"] {
	-webkit-appearance:none;	/* Remove Safari default */
	outline: none;
	width: 120px;
	height: 40px;
	
	position: relative;
	border-radius: 6px;
	background-color: #000;
	-webkit-background-clip: padding-box;
	
	border: 0;
	border-bottom: 1px solid transparent;
	-webkit-perspective: 200;
}

input[type="checkbox"]:before, input[type="checkbox"]:after {
	font: bold 22px/32px sans-serif;
	
	text-align: 	center;
	
	position: 	absolute;
	z-index: 	1;
    
    width: 			56px;
	height: 		30px;
    top: 			4px;
    
    border: 0;
	border-top: 1px solid rgba(255,255,255,0.15);
}

input[type="checkbox"]:before {
	content: 	attr(data-icon1);
	left: 		4px;
	border-radius: 3px 0 0 3px;

}

input[type="checkbox"]:after {
	content: 	attr(data-icon2);
	right: 		4px;
	border-radius: 0 3px 3px 0;
}


/* ----------- checked/unchecked */

/* unchecked */
input[type="checkbox"] {
	-webkit-border-image: -webkit-gradient(linear, 100% 0%, 0% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
	
	background-image: -webkit-gradient(
		linear, right top, left top,
		color-stop( 0, 	hsl(0,0%,0%) ),
		color-stop( 0.14, 	hsl(0,0%,50%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);						
	-webkit-box-shadow: inset #000 -7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
	);
	border-right: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;
	
	-webkit-box-shadow: rgba(0,0,0,.6) 8px 3px 10px;
	-webkit-transform: rotateY(-30deg) scaleX(.9) scaleY(1.1) translateX(-8px);
}


/* checked */
input[type="checkbox"]:checked {
	-webkit-border-image: -webkit-gradient(linear, 0% 0%, 100% 0%, 
							from(rgba(255,255,255,0)), to(rgba(255,255,255,0)), 
							color-stop(.1,rgba(255,255,255,.05)),
							color-stop(.3,rgba(5,137,200,0.4)),
							color-stop(.45,rgba(255,255,255,.05)),
							color-stop(.9,rgba(255,255,255,.1)) 
							)100% 100%;
	
	background-image: -webkit-gradient(
		linear, left top, right top,
		color-stop( 0, 	hsl(0,0%,0%) ),
		color-stop( 0.14, 	hsl(0,0%,50%) ),
		color-stop( 0.15, 	hsl(0,0%,0%) )
	);						
	-webkit-box-shadow: inset #000 7px 0 1px, inset #000 0 -5px 10px, inset #000 0 3px 3px;
}
input[type="checkbox"]:checked:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(0,0%,17%) ),to( hsl(0,0%,12%) ) 
	);
	border-left: 1px solid transparent;
	-webkit-border-image: -webkit-gradient(linear, left bottom, left top, 
							from(rgba(255,255,255,0)), 
							color-stop(.2,rgba(255,255,255,0)),
							color-stop(.4,rgba(255,255,255,.5)),
							to(rgba(255,255,255,.05))
							)10% 100%;

	-webkit-box-shadow: rgba(0,0,0,.6) -8px 3px 10px;
	-webkit-transform: rotateY(30deg) scaleX(.9) scaleY(1.1) translateX(8px);
}


/* ----------- active/inactve */

/* Active */
input[type="checkbox"]:before, input[type="checkbox"]:checked:after {
	color: hsl(200,100%,50%);
	text-shadow: 	rgba(0,0,0,.5) 0 1px 1px, #0589c8 0 0 10px;
	-webkit-transform: none;
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,20%) ), to( hsl(0,0%,15%) )
	);
	-webkit-border-image: none;
	-webkit-box-shadow: none;
	
	z-index: 	2;					
}

/* Inactive */
input[type="checkbox"]:after, input[type="checkbox"]:checked:before {
	color: #000;
	text-shadow: rgba(255,255,255,.1) 0 -1px 0;
	-webkit-box-reflect: none;
	z-index: 	1;
}




/* ----------- hover */

input[type="checkbox"]:hover {
	cursor: pointer;
}

input[type="checkbox"]:hover:before {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
	);

}
input[type="checkbox"]:hover:after {
	background-image: -webkit-gradient(linear, 70% top, 40% bottom, 
		from( hsl(0,0%,16%) ),to( hsl(0,0%,11%) ) 
	);
}

input[type="checkbox"]:checked:hover:before {
	background-image: -webkit-gradient( linear, 30% top, 60% bottom, 
		from( hsl(0,0%,16%) ),to( hsl(0,0%,12%) ) 
	);

}
input[type="checkbox"]:checked:hover:after {
	background-image: -webkit-gradient( linear, left top, left bottom,
		from( 	hsl(0,0%,19%) ), to( hsl(0,0%,15%) )
	);
}

